<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" append-to-body width="750" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="drawerForm" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入登录账号" maxlength="30" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入真实姓名" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="mode == 'add'">
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入登录密码" maxlength="30" clearable show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="password2">
            <el-input type="password" v-model="form.password2" placeholder="请再次输入密码" maxlength="30" clearable show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
          <el-form-item label="所属部门" prop="deptId">
            <jd-cascader v-model="form.deptId" :apiObj="$API.system.dept.tree" :apiProps="{label:'label',value: 'id'}" style="width: 100%;" placeholder="请选择..."></jd-cascader>
          </el-form-item>
          <el-form-item label="状态">
            <jd-radio v-model="form.status" dict="sys_normal_disable"></jd-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
          <el-form-item label="所属角色" prop="roleIds">
            <el-select v-model="form.roleIds" style="width: 100%">
              <el-option v-for="item in roles" :key="item.roleId" :label="item.label" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="数据存储" prop="connects" v-show="this.form.roleIds==2">
            <jd-select v-model="form.connects" :multiple="true" :apiObj="$API.app.dbConn.getConnects" :apiProps="{label:'connName',value: 'connId'}" style="width: 100%;" placeholder="请选择..."></jd-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  props: {
    roles: { type: Object, default: () => {} },
	},
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增用户",
        edit: "编辑用户",
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        userId: "",
        avatar: "",
        userName: "",
        nickName: "",
        name: "",
        password: "",
        deptId: [],
        roleIds: "",
        connects: [],
        phonenumber: "",
        email: "",
        status: "0"
      },
      //验证规则
      rules: {
        userName: [
          { required: true, message: "请输入登录账号" },
          { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }
        ],
        nickName: [{ required: true, message: "用户昵称不能为空" }],
        name: [{ required: true, message: "请输入真实姓名" }],
        password: [
          { required: true, message: "请输入登录密码" },
          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.form.password2 !== "") {
                this.$refs.drawerForm.validateField("password2")
              }
              callback()
            }
          }
        ],
        password2: [
          { required: true, message: "请再次输入密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致!"))
              } else {
                callback()
              }
            }
          }
        ],
        deptId: [{ required: true, message: "请选择所属部门" }],
        roleIds: [{ required: true, message: "请选择所属角色" }],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "请再次输入密码" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
    }
  },
  mounted() {
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode
      this.visible = true
      return this
    },
    //表单提交方法
    submit() {
      this.$refs.drawerForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true

          if (Array.isArray(this.form.deptId)){
            var depts = this.form.deptId;
            this.form.deptId = depts[depts.length - 1]
          }
          var form = { ...this.form }
          form.roleIds = this.form.roleIds.toString().split(",")

          delete form.password2
          var res
          if (this.mode == "add") {
            res = await this.$API.system.user.addUser.post(form)
          } else if (this.mode == "edit") {
            res = await this.$API.system.user.updateUser.put(form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode)
            this.visible = false
            this.$message.success("操作成功")
          } else {
            this.$alert(res.msg, "提示", { type: "error" })
          }
        } else {
          return false
        }
      })
    },
    //表单注入数据
    async setData(data) {
      Object.assign(this.form, data)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
